<template>
  <div class="container">
    <!-- 左侧课程列表 -->
    <div class="left-sidebar">
      <h3>课程列表</h3>
      <draggable 
        :list="courses" 
        :group="{ name: 'course', pull: 'clone', put: false }"
        item-key="id"
        @end="onEnd"
      >
        <template #item="{ element }">
          <div class="course-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>

    <!-- 右侧课程表 -->
    <div class="timetable">
      <div class="header-row">
        <div class="time-header">时间</div>
        <div 
          v-for="day in days" 
          :key="day"
          class="day-header"
        >
          {{ day }}
        </div>
      </div>

      <div 
        v-for="(time, timeIndex) in times" 
        :key="time"
        class="time-row"
      >
        <div class="time-label">{{ time }}</div>
        
        <div 
          v-for="day in days" 
          :key="day"
          class="day-cell"
        >
          <draggable
            :list="schedule[day][timeIndex]"
            group="course"
            item-key="id"
            class="cell-container"
          >
            <template #item="{ element,index }">
              <div class="course-item">
                {{ element.name }}
                <button 
                  class="delete-btn"
                  @click.stop="removeCourse(day, timeIndex, index)"
                >
                  ×
                </button>
              </div>
            </template>
          </draggable>
        </div>
      </div>
    </div>
    <a-button type="primary" @click="saveScheduleClick">保存</a-button>
  </div>
</template>

<script setup>
import { saveSchedule } from '@/request/api';
import { message } from 'ant-design-vue';
import { reactive } from 'vue';
import draggable from 'vuedraggable';
const saveScheduleClick = () => {
  saveSchedule({ schedule }).then(res => {
    if (res.success) {
      message.success(res.message);
      return
    }
      message.error(res.message);
  })
};
const onEnd = (event) => {
  console.log('拖拽结束', schedule);
}
const removeCourse = (day, timeIndex, courseIndex) => {
  schedule[day][timeIndex].splice(courseIndex, 1);
};
// 课程数据
const courses = reactive([
  { id: 1, name: '数学' },
  { id: 2, name: '语文' },
  { id: 3, name: '英语' },
  { id: 4, name: '物理' },
  { id: 5, name: '化学' },
]);

// 星期数据
const days = ['周一', '周二', '周三', '周四', '周五'];

// 时间段
const times = [
  '第一节',
  '第二节',
  '第三节',
  '第四节',
  '第五节',
  '第六节',
];

// 课程表数据结构
const schedule = reactive({});
days.forEach(day => {
  schedule[day] = [];
  times.forEach(() => {
    schedule[day].push([]);
  });
});
</script>

<style scoped>
.course-item {
  position: relative;
  padding-right: 25px !important;
}

.delete-btn {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: none;
  border-radius: 50%;
  background: #ff4444;
  color: white;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.course-item:hover .delete-btn {
  opacity: 1;
}

.delete-btn:hover {
  background: #cc0000;
}
.container {
  display: flex;
  gap: 30px;
  padding: 20px;
  font-family: 'Segoe UI', sans-serif;
}
.left-sidebar {
  width: 200px;
  border-right: 1px solid #ccc;
  padding-right: 20px;
}

.timetable {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header-row {
  display: grid;
  grid-template-columns: 80px repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.time-row {
  display: grid;
  grid-template-columns: 80px repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.day-header,
.time-label {
  padding: 12px;
  background: #f8f9fa;
  font-weight: 500;
  color: #2c3e50;
  border-radius: 6px;
  text-align: center;
}

.day-cell {
  min-height: 80px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 8px;
  transition: background 0.2s;
}

.day-cell:hover {
  background: #f8f9fa;
}

.course-item {
  position: relative;
  background: #e3f2fd;
  padding: 10px 15px;
  margin: 4px 0;
  border-radius: 6px;
  cursor: move;
  transition: transform 0.2s, box-shadow 0.2s;
}

.course-item:hover {
  transform: translateX(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.cell-container {
  min-height: 50px;
}
.delete-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.delete-btn::before,
.delete-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #6c757d;
  border-radius: 1px;
}

.delete-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.delete-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.course-item:hover .delete-btn {
  opacity: 1;
}

.delete-btn:hover::before,
.delete-btn:hover::after {
  background: #dc3545;
}
/* 时间列样式统一 */
.time-header,
.time-label {
  width: 80px;
  background: #f1f3f5;
  font-weight: 600;
  text-align: center;
  padding: 12px;
}
</style>